<template>
  <div v-if="isFullscreen" class="btn" @click="exit">
    <Icon :size="32" color="#59cbff">
      <ScreenOff/>
    </Icon>
  </div>
  <div v-else class="btn" @click="enter">
    <Icon :size="32" color="#59cbff">
      <Screen/>
    </Icon>
  </div>
</template>

<script setup lang="ts">
import {Screen, ScreenOff} from '@vicons/carbon';
import {Icon} from '@vicons/utils';
import {ref,onMounted,onUnmounted} from 'vue'
import {useFullscreen} from '@vueuse/core'

const {enter, exit} = useFullscreen();
const isFullscreen = ref(false);

const logFullScreen = () => {
  if (document.fullscreenElement) {
    console.log("enter fullscreen");
    isFullscreen.value = true
  } else {
    console.log("exit fullscreen");
    isFullscreen.value = false
  }
}

onMounted(() => {
  document.addEventListener('fullscreenchange', logFullScreen);
  logFullScreen();
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', logFullScreen);
})
</script>
<style lang="scss" scoped>
.btn {
  cursor: pointer;
}
</style>
